<template>
  <div class="templatelist">
    <el-tabs v-model="activeName" tab-position="left" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabsList" :key="item.id">
        <div class="listheader">
          <el-button type="primary" @click="addTemplateFun((isSet = 0))">新建模板</el-button>
        </div>
        <div class="listcontent">
          <el-card class="box-card" v-for="(it, ind) in templateData" :key="ind">
            <div slot="header" class="header">
              <span>{{ it.name }}</span>
              <span v-if="it.status == 1">已发布</span>
              <span v-else>未发布</span>
            </div>
            <div class="zhiding-btn">
              <el-button size="small" @click="toTopping(it)">置顶</el-button>
            </div>
            <div class="btnlist">
              <el-button type="primary" plain @click="toRelationPages(it)">
                页面管理<i class="el-icon-document el-icon--right"></i>
              </el-button>
              <el-button type="success" plain @click="addTemplateFun(it, (isSet = 1))">
                编辑<i class="el-icon-edit-outline el-icon--right"></i>
              </el-button>
              <el-popover
                placement="top"
                width="250">
                <el-radio-group v-model="pushMode" style="text-align: center; margin: 0">
                  <el-radio :label="1" style="margin-top: 10px">教师域名发布</el-radio>
                  <el-radio :label="2" style="margin: 10px 0">学生域名发布</el-radio>
                </el-radio-group>
                <div style="text-align: center; margin: 5px auto">
                  <el-button size="mini" type="primary" @click="publishTemp(it)">确认</el-button>
                </div>
                <el-button type="warning" plain slot="reference">发布<i class="el-icon-position el-icon--right"></i></el-button>
              </el-popover>
              <el-button type="danger" plain @click="copyTemplate(it.id)">
                复制<i class="el-icon-document-copy el-icon--right"></i>
              </el-button>
              <el-button type="info" plain @click="deleteTemplate(it.id)" :disabled="it.status == 1">
                删除<i class="el-icon-delete el-icon--right"></i>
              </el-button>
              <el-button v-show="it.status == 1" type="warning" plain @click="viewDomainList(it.id)">
                域名查看<i class="el-icon-position el-icon--right"></i>
              </el-button>
            </div>
            <div class="cardbottom">
              <p>应用产品：{{ it.appItemName }}</p>
              <p>备注：{{ it.note }}</p>
              <p>时间：{{ it.updateTime }}</p>
              <p>发布时间：{{ it.lastPublishTime }}</p>
            </div>
          </el-card>
        </div>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="formData.pageSize"
          :current-page="formData.pageNum"
          @current-change="SetPage"
          @size-change="handleSizeChange"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <!-- 学生域名发布 -->
    <NewPublishTemplate
      ref="stupubs"
      :stuDialogVisible="stuPublish"
      @colseDialogStu="colseDialogStu"
      @publistList="pubList">
    </NewPublishTemplate>
    <!-- 教师域名发布 -->
    <PublishTemplate
      ref="teapubs"
      :teaDialogVisible="teaPublish"
      @colseDialogTea="colseDialogTea"
      @publistList="pubList">
    </PublishTemplate>
    <!-- 添加模板 -->
    <AddTemplate
      ref="edit"
      :addtempDialogVisible="addtempDialogVisible"
      :appType="appType"
      @editorList="editList">
    </AddTemplate>
    <!--域名查看-->
    <DomainView :DomainDialogVisible="DomainDialogVisible" :ID="temId" @changeShow="showDomainList"></DomainView>
  </div>
</template>
<script>
import PublishTemplate from "./components/publishTemplate";
import NewPublishTemplate from "./components/newPublishTemplate";
import AddTemplate from "./components/addTemplate";
import DomainView from "./components/domainView";
import { getTemplateList, getTypeList, copyTemplate, deleteTemplate, toppingTemplate } from "@/api/basisMG";
export default {
  components: {
    NewPublishTemplate,
    PublishTemplate,
    AddTemplate,
    DomainView
  },
  data() {
    return {
      temId: '',
      stuDialogVisible: false,
      teaDialogVisible: false,
      addtempDialogVisible: false,
      DomainDialogVisible: false,
      templateData: [],
      tabsList: [],
      formData: {
        type: "student_app",
        name: "",
        pageSize: 10,
        pageNum: 1,
      },
      appFormData: {
        type: 0,
        productType: "",
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      appType: "",
      activeName:"student_app",
      pushMode: 0,
      stuPublish: false,
      teaPublish: false
    };
  },
  created() {
    this.getTypeList();
    this.updateType();
  },
  methods: {
    updateType () {
      let protype = this.$route.query.protype;
      this.formData.type = protype;
      this.getTemplateList();
      if (protype === 'student_app') {
        this.activeName  = 'student_app';
      } else if (protype === 'student_pad') {
        this.activeName  = 'student_pad';
      }else if (protype === 'teacher_app') {
        this.activeName  = 'teacher_app';
      }
    },
    // 分页
    SetPage(e) {
      this.formData.pageNum = e;
      this.getTemplateList();
    },
    handleSizeChange (val) {
      this.formData.pageSize = val;
      this.getTemplateList();
    },
    handleClick(tab) {
      this.formData.type = tab.name;
      this.appType = tab.name;
      this.getTemplateList();
    },
    async getTypeList() {
      const res = await getTypeList(this.appFormData);
      this.tabsList = res.data.content;
      if (this.formData.type === undefined) {
        this.formData.type = this.tabsList[0].id;
        this.getTemplateList();
      }
    },
    // 获取模板列表
    async getTemplateList() {
      const res = await getTemplateList(this.formData);
      if (res.data) {
        this.templateData = res.data.content;
        this.total = res.data.total;
      } else {
        this.templateData = [];
      }
    },
    addTemplateFun(row) {
      const rowList = {};
      if (this.isSet == 0) {
        //点击添加
        rowList.isSet = 0;
      } else {
        //点击编辑
        rowList.name = row.name;
        rowList.note = row.note;
        rowList.appitemId = row.appitemId;
        rowList.id = row.id;
        rowList.isSet = 1;
      }
      this.$refs["edit"].showEdit(rowList);
    },
    pubList() {
      this.getTemplateList();
      this.teaPublish = false;
      this.stuPublish = false;
    },
    editList() {
      this.getTemplateList();
    },
    colseDialogStu () {
      this.stuPublish = false;
      this.pushMode = 0;
    },
    colseDialogTea () {
      this.teaPublish = false;
      this.pushMode = 0;
    },
    toRelationPages(e) {
      this.$router.push({ path: "./relationPages", query: { id: e.id, type: e.type } });
    },
    // 复制模板
    copyTemplate(id) {
      this.$confirm("要复制该模板吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await copyTemplate({ id: id });
          if (data.code != 200) return this.$message.error("操作失败请稍后重试");
          this.$message({
            type: "success",
            message: "复制成功!",
          });
          this.getTemplateList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消复制",
          });
        });
    },
    // 删除模板
    deleteTemplate(id) {
      this.$confirm("确定要删除吗？删除后将无法恢复，请谨慎操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteTemplate({ id: id });
          if (data.code != 200) {
            this.$message.error({
              type: "error",
              message: data.message,
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getTemplateList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 发布模板
    publishTemp(row) {
      const rowList = row;
      console.log(this.pushMode, 'this.pushMode---');
      switch (this.pushMode) {
        case 1:
          this.teaPublish = true;
          this.stuPublish = false;
          this.pushMode = 0;
          this.$refs["teapubs"].showPublish(rowList);
          break;
        case 2:
          this.stuPublish = true;
          this.teaPublish = false;
          this.pushMode = 0;
          console.log(this.stuPublish, 'this.stuPublish');
          this.$refs["stupubs"].showPublish(rowList);
          break;
        default:
          break;
      }
    },
    // 域名查看
    viewDomainList(id) {
      this.DomainDialogVisible = true;
      this.temId = id;
    },
    showDomainList(data) {
      if (data === "false") {
        this.DomainDialogVisible = false;
      } else {
        this.DomainDialogVisible = true;
      }
    },
    // 置顶模板
    toTopping (item) {
      this.$confirm("要置顶该模板吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await toppingTemplate({ id: item.id });
          if (data.code != 200) return this.$message.error("操作失败请稍后重试");
          this.$message({
            type: "success",
            message: "置顶成功!",
          });
          this.getTemplateList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消置顶",
          });
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.listheader {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.listcontent {
  display: flex;
  flex-wrap: wrap;
  .box-card {
    width: 286px;
    margin-right: 20px;
    margin-bottom: 20px;
    // position: relative;
    &:nth-child(5n){
      margin-right: 0 !important;
    }
    .header {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        display: block;
      }
    }
    .zhiding-btn{
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
    }
    .btnlist {
      padding: 10px 0;
      background: #eee;
      .el-button {
        margin: 15px auto;
        display: block;
      }
    }
    .cardbottom {
      font-size: 14px;
    }
  }
}
</style>
